<template>
	<view>
		<scroll-view scroll-y="true" class="globe_back">
			<!-- <image class="back-img" src="https://jiuyuan.smomotbo.com/static/imgs/personal/my-back.png" mode=""></image> -->

			<view class="home-back">
				<!-- 导航 -->
				<view class="title-box">
					<view class="state-box" :style="{ height: statusBarHeight + 'px' }"></view>
					<view class="flex flex_column py_32 h_88 justify_content_center">
						<!-- <text class="f_32 cl_00091A boldTtf">功能页面</text> -->
					</view>
				</view>
				<view class="xiaoxi" @click="isRouter('/pages/home/message')">
					<view>
						<u-icon name="bell" color="#292D32" size="28"></u-icon>
					</view>
					<view class="xiaoxi_num">1</view>
				</view>
			</view>

			<view style="height: 25px"></view>
			<view class="py_32 nav-list-box">
				<view class="flex align_items_center" @click="myinfo">
					<image class="img_140" style="border-radius: 50%" :src="userInfo.avatar||url + '/me/ht.png'" mode="widthFix"></image>
					<!-- <image class="img_140" style="border-radius: 50%" v-else :src="url + '/me/ht.png'" mode="widthFix"></image> -->
					<view class="flex flex_column ml_24" style="width: 56%">
						
						<text class="f_36 cl_00091A fw_bold"v-if="userInfo.id">{{ userInfo.nickname ? userInfo.nickname : '同路人用户' }}</text>
						<text class="f_36 cl_00091A fw_bold" v-else>请点击登录</text>
						<text class="f_28 cl_666B75 mt_8" v-if="userInfo.mobile">手机号：{{ userInfo.mobile ? userInfo.mobile : '' }}</text>
					</view>
					<view style="width: 280rpx; text-align: right; float: right">
						<image style="width: 40rpx; height: 40rpx"  src="/static/imgs/icon_sz.png"></image>
					</view>
				</view>

				<view class="mt_40">
					<view class="flex justify_content_between align_items_center">
						<view class="flex align_items_center">
							<text class="log-text"></text>
							<text class="ml_8 f_32 cl_00091A fw_bold">我的订单</text>
						</view>
						<view class="flex align_items_center" @click="isRouter('/pages/personal/order/order')">
							<text class="f_28 cl_999CA3">查看全部</text>
							<image class="img_32 ml_8" :src="url + 'next-icon.png'" mode=""></image>
						</view>
					</view>
					<view class="p_32_40 br_24 back_fff flex justify_content_between mt_24">
						<view @click="isRouter(item.path)" v-for="(item, index) in orderNavList" :key="index"
							class="flex flex_column align_items_center">
							<image class="img_48" :src="url + `me/${item.icon}.png`" mode=""></image>
							<text class="f_24 cl_666B75 mt_16">{{ item.text }}</text>
						</view>
					</view>
				</view>
				<view class="mt_40">
					<view class="align_items_center">
						<view class="flex align_items_center">
							<text class="log-text"></text>
							<text class="ml_8 f_32 cl_00091A fw_bold">入驻专区</text>
						</view>
						<view class="flex justify_content_between mt_24 info-box"
							@click="isRouter('/pages/home/query-info/query-info', true)">
							<view class="players-box" style="width: 330rpx; height: 124rpx"
								@click="isRouter('/pages/me/MerchantSettlement', true)">
								<image style="width: 330rpx; height: 124rpx" :src="url + '/imgs/me01.png'" mode=""></image>
							</view>
							<view class="players-box" style="width: 330rpx; height: 124rpx"
								@click="isRouter('/pages/me/orderReceiver', true)">
								<image style="width: 330rpx; height: 124rpx" :src="url + '/imgs/me02.png'" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="mt_40">
					<view class="flex justify_content_between align_items_center">
						<view class="flex align_items_center">
							<text class="log-text"></text>
							<text class="ml_8 f_32 cl_00091A fw_bold">更多功能</text>
						</view>
					</view>
					<view>
						<view>
							<view @click="isRouter('/pages/looking/swzhaoling')"
								class="p_24 br_24 back_fff flex justify_content_between align_items_center mt_24">
								<view class="flex align_items_center">
									<!-- <image class="img_64" :src="url + 'icon_kf.png'" mode=""></image> -->
									<image class="img_64" src="../../static/imgs/wdfb.png" mode=""></image>
									<text class="f_28 cl_333A47 ml_24">我的发布</text>
								</view>
								<image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
							</view>
							<view @click="isRouter(item.path)" v-for="item in myNavList"
								class="p_24 br_24 back_fff flex justify_content_between align_items_center mt_24">
								<view class="flex align_items_center">
									<image class="img_64" :src="url + `imgs/${item.icon}.png`" mode=""></image>
									<text class="f_28 cl_333A47 ml_24">{{ item.text }}</text>
								</view>
								<image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
							</view>
							<view @click="show = true"
								class="p_24 br_24 back_fff flex justify_content_between align_items_center mt_24">
								<view class="flex align_items_center">
									<image class="img_64" :src="url + '/imgs/icon_kf.png'" mode=""></image>
									<text class="f_28 cl_333A47 ml_24">联系平台</text>
								</view>
								<image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
							</view>
							<view @click="isRouter('/pages/index/feedback')"
								class="p_24 br_24 back_fff flex justify_content_between align_items_center mt_24">
								<view class="flex align_items_center">
									<image class="img_64" :src="url + '/imgs/icon_kf.png'" mode=""></image>
									<text class="f_28 cl_333A47 ml_24">意见反馈</text>
								</view>
								<image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 20px"></view>
				<!-- <view v-if="userInfo" class="flex justify_content_center mt_74"> -->
			<!-- 	<view  class="flex justify_content_center" @click="isLoginOut">
					<view class="login-out-box" >
						<text class="f_28 cl_666B75">退出登录</text>
					</view>
				</view> -->
			</view>
		</scroll-view>
		<!-- 联系平台弹窗 -->
		<u-popup :show="show" mode="bottom" @close="close" bgColor="transparent">
			<view class="back_fff br_24 mb_24 p_24 txBtn">
				<text class="line_F7FAFF photo">在线客服</text>
				<text class="photo">拨打平台电话</text>
			</view>
			<view class="back_fff br_24 p_24 txBtn cl_FF6401" @click="close">取消</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		memberInfo
	} from '@/api';
	export default {
		data() {
			return {
				show: false,
				statusBarHeight: 0,
				windowHeight: 0,
				orderRouterHas: [],
				orderNavList: [{
						icon: 'icon_fw',
						text: '服务订单',
						path: '/pages/me/MyOrder/MallOrders?type=3'
					},
					{
						icon: 'icon_zc',
						text: '租车订单',
						path: '/pages/me/MyOrder/MallOrders?type=2'
					},
					{
						icon: 'icon_sc',
						text: '商城订单',
						path: '/pages/me/MyOrder/MallOrders?type=1'
					},
					{
						icon: 'icon_tc',
						text: '拖车订单',
						path: '/pages/me/MyOrder/MallOrders?type=4'
					},
					{
						icon: 'icon_ks',
						text: '开锁订单',
						path: '/pages/me/MyOrder/MallOrders?type=5'
					}
				],
				myNavList: [{
						icon: 'icon_dz',
						text: '收货地址',
						path: '../me/Address'
					},
					{
						icon: 'icon_yhq',
						text: '优惠券',
						path: '../me/coupon'
					},
					{
						icon: 'icon_wt',
						text: '常见问题',
						path: '../me/commonProblem'
					},
					{
						icon: 'icon_mysc',
						text: '我的收藏',
						path: '../me/collect'
					},
					// {
					// 	icon: 'icon_mysc',
					// 	text: '商家中心',
					// 	path: '../me/collect'
					// },
					// {
					// 	icon: 'icon_mysc',
					// 	text: '接单员',
					// 	path: 'pages/business/business'
					// },
					// {
					// 	icon: 'icon_mysc',
					// 	text: '接单员',
					// 	path: 'pages/OrderReceiverTerminal/me'
					// }
				],
				userInfo: '',
				url: '',
			};
		},
		onLoad() {
			// 获取状态栏高度
			const than = this;
			uni.getSystemInfo({
				success(res) {
					than.statusBarHeight = res.statusBarHeight;
					// 默认px,转成rpx
					than.windowHeight = res.screenHeight * (750 / res.windowWidth) - 100;
				}
			});
		},
		onShow() {
			this.$.ajax(1,"POST","users/user_index",{},(res)=>{
			  if(res.code==200){
				    	this.userInfo = res.data;
			  }else{
			     this.$.ti_shi(res.msg);
			  }
			})
			// memberInfo().then((res) => {
			// 	console.log(res);
			// 	this.userInfo = res.data;
			// });
			this.url = this.$.ajax_url2;
			
		},
		methods: {
			close() {
				this.show = false;
			},
			nameClose() {
				this.nameShow = false;
			},
			myinfo() {
				if(!this.$.get_data("vuex_token")){
					this.$.wx_login()
				}else{
					uni.navigateTo({
						url: '/pages/me/setUp'
					});
				}
				
				
			},
			isRouter(url) {
				if(!this.$.get_data("vuex_token")){
					  this.$.ti_shi('请登录！')
				}else{
					this.$api.auth(url);
				}
				
			},
			// 退出登录
			isLoginOut() {
				const than = this;
				uni.showModal({
					title: '确定退出登录？',
					success(res) {
						if (res.confirm) {
							than.userInfo = '';
							than.$api.msg('退出成功');
							uni.clearStorageSync();
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.back-img {
		width: 750rpx;
		height: 524rpx;
		position: fixed;
		left: 0;
		top: 0;
	}

	.txBtn {
		margin: 8px 16px;
		text-align: center;
	}

	.photo {
		display: block;
		padding: 8px 0;
	}

	.home-back {
		width: 750rpx;
		height: 420rpx;
		background-image: linear-gradient(#d9f2ff, #f2fbff);
		position: relative;

		.title-box {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 4;

			.state-box {
				width: 750rpx;
				background-color: #d9f2ff;
			}
		}
	}

	.nav-list-box {
		position: relative;
		z-index: 3;
		margin-top: -300rpx;

		.log-text {
			width: 4rpx;
			height: 32rpx;
			background-color: #3377ff;
		}
	}

	.log-line {
		width: 4rpx;
		height: 24rpx;
		background-color: #ccced1;
		margin: 0 40rpx;
	}

	.login-out-box {
		width: 590rpx;
		height: 92rpx;
		border-radius: 46rpx;
		box-shadow: 0px 2px 8px 0px rgba(51, 119, 255, 0.05);
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	.xiaoxi {
		position: absolute;
		top: 108rpx;
		left: 32rpx;
	}

	.xiaoxi_num {
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		width: 32rpx;
		height: 32rpx;
		background: #FF6401;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		line-height: 32rpx;
		font-weight: bold;
		font-size: 20rpx;
		color: #FFFFFF;
	}
</style>